<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function f1(){
                var body=document.getElementById("b");
                var a1=document.getElementById("a1");

                var obj=document.createElement("div");
                var text=document.createTextNode("Hello");

                obj.appendChild(text);

                // body.appendChild(obj);

                // body.insertBefore(obj,a1);

                // body.replaceChild(obj,a1);


                // body.removeChild(a1);

                // a1.remove();

                // body.innerHTML=body.innerHTML+"<div>Hello</div>";


                // body.innerHTML="<div>Hello</div>"+body.innerHTML;

                body.innerHTML="";

            }

            function addRow(){
                var nameInput=document.getElementById("name");
                var salaryInput=document.getElementById("salary");

                var name=nameInput.value;
                var salary=salaryInput.value;

                console.log(name+" "+salary);

                var t=document.getElementById("t");

                // t.innerHTML=t.innerHTML+"<tr>"
                //                        +"    <td>"+name+"</td>"
                //                        +"    <td>"+salary+"</td>"
                //                        +"    <td>"
                //                        +"        <a href='javascript:;' onclick='rm(this);'>删除</a>"
                //                        +"    </td>"
                //                        +"</tr>";

                var trObj=document.createElement("tr");
                var nameTdObj=document.createElement("td");
                var salaryTdObj=document.createElement("td");
                var deleteTdObj=document.createElement("td");

                nameTdObj.appendChild(document.createTextNode(name));
                salaryTdObj.appendChild(document.createTextNode(salary));

                var aObj=document.createElement("a");
                aObj.appendChild(document.createTextNode("删除"));
                aObj.href="javascript:;";
                aObj.onclick=function(){
                    rm(this);
                };
                deleteTdObj.appendChild(aObj);

                trObj.appendChild(nameTdObj);
                trObj.appendChild(salaryTdObj);
                trObj.appendChild(deleteTdObj);

                t.appendChild(trObj);



            }

            function rm(deleteA){
                if(confirm("确认是否删除？")){
                    deleteA.parentNode.parentNode.remove();
                }
            }
        </script>
    </head>
    <body id="b">
        <a id="a1" href="javascript:;" onclick="f1();">test</a>


        <hr/>


    <table id="t" width="60%" bgcolor="#cccccc" border="1">
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>删除</th>
        </tr>
    </table>

    <hr/>

    姓名：<input type="text" id="name"/><br/>
    工资：<input type="text" id="salary"/><br/>

    <input type="button" value="添加" onclick="addRow();"/>

    </body>
</html>